<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">安全管理台账,危险源台账</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="重大危险源名称">
                            <el-input placeholder="请输入" class="inputW" v-model="riskName"></el-input>
                        </el-form-item>
                        <el-form-item label="注册编号">
                            <el-input placeholder="请输入" class="inputW" v-model="registerNum"></el-input>
                        </el-form-item>
                        <el-form-item label="危险等级">
                            <el-select class="inputW" v-model="riskLevel">
                                <el-option
                                        v-for="item in riskLevelData"
                                        :key="item.Id"
                                        :label="item.Name"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="addBtn">新增危险源</el-button>
                            <!--                            <el-button type="success" @click="search">导出模板</el-button>-->
                            <!--                            <el-button type="warning" @click="search">导出特种设备信息</el-button>-->
                            <!--                            <el-button type="primary" @click="search">导入</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="riskName" label="名称"></el-table-column>
                    <el-table-column prop="registerNum" label="注册编号"></el-table-column>
                    <el-table-column prop="workArea" label="作业区域"></el-table-column>
                    <el-table-column prop="userName" label="责任人"></el-table-column>
                    <el-table-column prop="riskType" label="危险类型"></el-table-column>
                    <el-table-column prop="riskLevel" label="危险等级" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.riskLevel==1">
                                <img src="../../../imgs/onelevel.png"><br>
                                <div align="center">重大风险</div>
                            </div>
                            <div v-if="scope.row.riskLevel==2">
                                <img src="../../../imgs/twolevel.png"><br>
                                <div align="center">较大风险</div>
                            </div>
                            <div v-if="scope.row.riskLevel==3">
                                <img src="../../../imgs/threelevel.png"><br>
                                <div align="center">一般风险</div>
                            </div>
                            <div v-if="scope.row.riskLevel==4">
                                <img src="../../../imgs/fourlevel.png"><br>
                                <div align="center">低风险</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="startTime" label="形成时间">
                        <template slot-scope="scope">
                            <el-tag size="medium">{{scope.row.startTime.replace("T"," ").substr(0,10)}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="当前状态">
                        <template slot-scope="scope">
                            <div v-if="scope.row.currentState == '0'">
                                <el-tag size="medium" type="success">未消除</el-tag>
                            </div>
                            <div v-if="scope.row.currentState == '1'">
                                <el-tag size="medium" type="success">消除</el-tag>
                            </div>
                        </template>

                    </el-table-column>
                    <el-table-column prop="stationName" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="editClick(scope.row)" round size="small" icon="el-icon-edit"></el-button>
                            <el-button icon="el-icon-share" round size="small"
                                       @click="removeItem(scope.row.Id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-row>

        </el-row>
        <el-dialog :title="editMod?'编辑台账':'新增台账'" :visible.sync="dialogFormVisible">
            <el-form :model="param" ref="formName" :inline="true" style="margin-left: 55px">
                <el-form-item>
                    <el-form-item label="危险源名称" :label-width="130" :rules="[
                             {required:true,message:'危险源名称!',trigger:'blur'}
                            ]">
                        <el-input v-model="param.riskName" autocomplete="off" class="itemW"
                                  prop="riskName"></el-input>
                    </el-form-item>
                </el-form-item>

                <el-form-item>
                    <el-form-item label="注册编号" :label-width="120" :rules="[
                             {required:true,message:'注册编号!',trigger:'blur'}
                            ]">
                        <el-input v-model="param.registerNum" autocomplete="off" class="itemW"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="设备负责人" :label-width="130" :rules="[
                             {required:true,message:'负责人!',trigger:'blur'}
                            ]">
                    <!--                    <el-input v-model="param.responseBy" autocomplete="off" class="itemW"></el-input>-->
                    <el-select v-model="param.responseBy" style="width: 200px">
                        <!--                        <el-option v-for="v in Chargerlist" :value="v.Id" :key="v.Id" :label="v.userName>-->

                        <!--                        </el-option>-->
                        <el-option
                                v-for="item in Chargerlist"
                                :key="item.Id"
                                :label="item.userName"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="作业区域" :label-width="120" :rules="[
                             {required:true,message:'作业区域!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.workArea" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <!--                <el-form-item label="当前状态" :label-width="120" :rules="[-->
                <!--                             {required:true,message:'当前状态!',trigger:'blur'}-->
                <!--                            ]">-->
                <!--                    <el-select v-model="param.currentState" style="width: 200px">-->
                <!--                        <el-option value="0">创建</el-option>-->
                <!--                        <el-option value="1">消除</el-option>-->
                <!--                    </el-select>-->
                <!--                </el-form-item>-->
                <el-form-item label="危险类型" :label-width="130" :rules="[
                             {required:true,message:'危险类型!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.riskType" autocomplete="off" class="itemW"></el-input>
                </el-form-item>

                <el-form-item label="形成时间" :label-width="120" :rules="[
                             {required:true,message:'形成时间!',trigger:'blur'}
                            ]">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="param.startTime" placeholder="日期"
                                    style="width:200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="危险等级" :label-width="130" :rules="[
                             {required:true,message:'危险等级!',trigger:'blur'}
                            ]">
                    <el-select v-model="param.riskLevel" style="width: 200px">
                        <el-option
                                v-for="item in riskLevelData"
                                :key="item.Id"
                                :label="item.Name"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                    <!--                    <el-input v-model="param.deviceCharger" autocomplete="off" class="itemW"></el-input>-->
                </el-form-item>
                <el-form-item label="确认依据" :label-width="120" :rules="[
                             {required:true,message:'确认依据!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.confirmBasi" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="可能造成后果" :label-width="130" :rules="[
                             {required:true,message:'可能造成后果!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.possibleResult" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="控制措施" :label-width="120" :rules="[
                             {required:true,message:'控制措施!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.controlMeasure" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="周围环境" :label-width="130" :rules="[
                             {required:true,message:'周围环境!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.surrounding" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitClick">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            currentPage: 1,
            tableData: [],
            dialogFormVisible: false,
            param: {
                // Id: '',
                // riskNo: '',
                // projectNo: '',
                // riskName: '',
                // registerNum: '',
                // workArea: '',
                // currentState: 0,
                // riskType: '',
                // startTime: '',
                // responseBy: '',
                // riskLevel: '',
                // confirmBasi: '',
                // possibleResult: '',
                // controlMeasure: '',
                // surrounding: ''
            },
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            tableData: [],
            projectNo: '',
            riskName: '',
            registerNum: '',
            riskLevel: '',
            editMod: false,
            Chargerlist: [],
            riskLevelData: [{Name: '所有', Id: 0}, {Name: 'I级', Id: 1}, {
                Name: 'II级',
                Id: 2
            }, {Name: 'III级', Id: 3}, {Name: 'IV级', Id: 4}]
        },
        created: function () {
            $('.page').show();
            HttpUtil.get('User/Child').success((r) => {
                if (r.state == 0) {
                    vuePage.Chargerlist = r.data;
                } else {
                    vuePage.$message({type: 'error', message: '修改失败'})
                }
            })
            // SiteConfig.account.projectNo
            this.projectNo = SiteConfig.account.projectNo;
            this.loadData();
        },
        methods: {
            editClick(row) {
                // this.param = row;
                this.param = Object.assign(this.param, row);
                this.dialogFormVisible = true;
                this.editMod = true;
            },
            loadData: function () {
                var param = {};
                if (this.riskName)
                    param.riskName = this.riskName;
                if (this.registerNum)
                    param.registerNum = this.registerNum;
                if (this.riskLevel)
                    param.riskLevel = this.riskLevel;
                // if (SiteConfig.account.projectNo)
                //     param.projectNo = SiteConfig.account.projectNo;
                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('Risksource/List', param).success((res) => {
                    vuePage.tableData = res.data;
                    vuePage.totalCount = res.total;
                });
            },
            addBtn: function () {
                this.editMod = false;
                // var obj = this.param;
                // for (key in obj) {
                //     this.param[key] = '';
                // }
                // this.form.reset()
                // this.param = [];
                this.param = {};
                this.dialogFormVisible = true;
                this.loadData();
            },
            submitClick() {

                if (!this.param.riskName) {
                    this.$message({type: 'error', message: '危险源名称不能为空'})
                    return;
                }
                if (!this.param.registerNum) {
                    this.$message({type: 'error', message: '注册编号不能为空'})
                    return;
                }
                if (!this.param.workArea) {
                    this.$message({type: 'error', message: '作业区域不能为空'})
                    return;
                }


                // if (!this.param.currentState) {
                //     this.$message({type: 'error', message: '当前状态不能为空'})
                //     return;
                // }
                if (!this.param.riskType) {
                    this.$message({type: 'error', message: '危险类型不能为空'})
                    return;
                }
                if (!this.param.startTime) {
                    this.$message({type: 'error', message: '形成时间不能为空'})
                    return;
                }
                if (!this.param.responseBy) {
                    this.$message({type: 'error', message: '责任人不能为空'})
                    return;
                }
                if (!this.param.riskLevel) {
                    this.$message({type: 'error', message: '危险等级不能为空'})
                    return;
                }
                if (!this.param.confirmBasi) {
                    this.$message({type: 'error', message: '确认依据不能为空'})
                    return;
                }
                if (!this.param.possibleResult) {
                    this.$message({type: 'error', message: '可能造成不能为空'})
                    return;
                }
                if (!this.param.controlMeasure) {
                    this.$message({type: 'error', message: '控制措施不能为空'})
                    return;
                }
                if (!this.param.surrounding) {
                    this.$message({type: 'error', message: '周围环境不能为空'})
                    return;
                }
                // if (!this.param.checkCycle)
                // {
                //     this.$message({type:'error', message:'定检周期不能为空'})
                //     return;
                // }
                if (vuePage.editMod) {
                    HttpUtil.get('Risksource/Update', this.param).success((r) => {
                        if (r.state == 0) {
                            this.totalCount = r.total;
                            this.$message({
                                message: '修改成功！',
                                type: 'success'
                            });
                            vuePage.loadData();
                            setTimeout(function () {
                                vuePage.dialogFormVisible = false;
                            }, 1000)
                        } else {
                            vuePage.$message({type: 'error', message: '修改失败'})
                        }
                    })
                } else {
                    this.param.projectNo = SiteConfig.account.projectNo;
                    HttpUtil.get('Risksource/Add', this.param).success((r) => {
                        if (r.state == 0) {
                            this.totalCount = r.total;
                            this.$message({
                                message: '添加成功！',
                                type: 'success'
                            });
                            vuePage.loadData();
                            setTimeout(function () {
                                vuePage.dialogFormVisible = false;
                            }, 1000)
                        } else {
                            vuePage.$message({type: 'error', message: '添加失败'})
                        }
                    })
                }
            },
            removeItem: function (id) {
                if (!id) {
                    this.$message({
                        type: 'info',
                        message: 'id为空'
                    });
                    return;
                }
                this.$confirm('此操作当前状态修改为消除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    var p = {};
                    p.Id = id;
                    p.currentState = 1;
                    HttpUtil.get('Risksource/Update', p).success((r) => {
                        if (r.state == 0) {
                            vuePage.$message({
                                type: 'success',
                                message: '消除成功!'
                            });
                            vuePage.loadData();
                        } else {
                            vuePage.$message.error('消除失败!');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消消除'
                    });
                });

            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            search: function () {
                this.loadData();
            },
            onCheckbox: function (row) {
            }
        },

        mounted: function () {
            /* 表格值
            this.eleITableData=[{
                name:'A相电流',
                max:566,
                maxTime:'2018-3-5 11:11:45',
                min:34,
                minTime:'2018-11-12 15:33:33',
                avg:456
            },{
                name:'B相电流',
                max:566,
                maxTime:'2018-3-5 11:11:45',
                min:34,
                minTime:'2018-11-12 15:33:33',
                avg:456
            },{
                name:'C相电流',
                max:566,
                maxTime:'2018-3-5 11:11:45',
                min:34,
                minTime:'2018-11-12 15:33:33',
                avg:456
            }];*/


        }
    });
</script>
</body>
</html>
